<template>
  <div>
    <div class="main" v-if="flag2 == 1">
      <el-tabs type="border-card">
        <el-tab-pane label="用户管理">
          <el-form
            :inline="true"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="小区名称" prop="communityname">
              <el-input
                v-model="ruleForm.communityname"
                style="width: 500px"
              ></el-input>
            </el-form-item>
            <el-form-item label="单元名称" prop="unitname">
              <el-input
                v-model="ruleForm.unitname"
                style="width: 500px"
              ></el-input>
            </el-form-item>
            <br />
            <el-form-item label="栋数" prop="unitnum">
              <el-input
                v-model="ruleForm.unitnum"
                style="width: 500px"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态选择" prop="unitstatus">
              <el-select
                v-model="ruleForm.unitstatus"
                placeholder="请选状态"
                style="width: 500px"
              >
                <el-option label="已建成" :value="1"></el-option>
                <el-option label="未建成" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-form-item label="咨询问候">
                <div style="width: 1125px">
                  <vue-ueditor-wrap
                    v-model="ruleForm.unitcontext"
                    :config="editorConfig"
                    @ready="onEditorReady"
                  />
                </div>
              </el-form-item>
              <div class="buttons">
                <el-button
                  type="primary"
                  @click="resetForm('ruleForm')"
                  style="
                    width: 80px;
                    height: 40px;
                    margin-bottom: 20px;
                    font-size: 16px;
                  "
                  ><i class="fa fa-mail-reply"></i>返回</el-button
                >
                <el-button
                  v-if="bth"
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="width: 80px; height: 40px; font-size: 16px"
                  ><i v-if="flag" class="fa fa-save"></i
                  ><i v-if="!flag" class="el-icon-loading"></i
                  ><span>保存</span></el-button
                >
                <el-button
                  :loading="yes"
                  v-if="!bth"
                  type="primary"
                  @click="submitForm3('ruleForm')"
                  style="width: 80px; height: 40px; font-size: 16px"
                  ><i class="fa fa-save"></i><span>保存</span></el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main" v-if="flag2 == 2">
      <el-tabs type="border-card">
        <el-tab-pane label="用户管理">
          <div class="table">
            <div>
              <sup>*</sup> 小区名称：<span>{{
                grunlist[0].communityname
              }}</span>
            </div>
            <div>
              <sup>*</sup> 单元名称：<span>{{ grunlist[0].unitname }}</span>
            </div>
            <div>
              <sup>*</sup> 栋数：<span>{{ grunlist[0].unitnum }}</span>
            </div>
            <div>
              <sup>*</sup> 状态：<span>{{
                grunlist[0].unitStatus == 1 ? "已建成" : "未建成"
              }}</span>
            </div>
            <div>咨询问候：<span v-html="grunlist[0].unitcontext"></span></div>
          </div>
        </el-tab-pane>
        <div class="buttons">
          <el-button
            type="primary"
            @click="resetForm2()"
            style="
              width: 80px;
              height: 40px;
              margin-bottom: 20px;
              font-size: 16px;
            "
          >
            <i class="fa fa-mail-reply"></i>返回</el-button
          >
          <el-button
            type="primary"
            @click="submitForm2()"
            style="width: 80px; height: 40px; font-size: 16px"
          >
            <i class="fa fa-save"></i><span>编辑</span></el-button
          >
          <!-- class="el-icon-loading" -->
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      bth: true,
      yes: false,
      grunlist: [
        {
          communityname: "",
          unitname: "",
          unitnum: "",
          unitstatus: "",
          unitcontext: "",
        },
      ],
      flag: true,
      flag2: 1,
      ruleForm: {
        communityname: "",
        unitname: "",
        unitnum: "",
        unitstatus: "",
        unitcontext: "",
        token: sessionStorage.getItem("token"),
      },
      tabeleData: {
        unitcontext: "",
      },
      // 富文本编辑框
      content: "", // 用于绑定编辑器内容
      editorConfig: {
        // UEditor 配置项
        UEDITOR_HOME_URL: "/ueditor/", // 确保路径正确
        serverUrl: "", // 如果需要上传功能，配置服务器端接口地址
        initialFrameWidth: "100%",
        initialFrameHeight: 350,
        autoHeightEnabled: false,
        toolbars: [
          [
            "fullscreen",
            "source",
            "undo",
            "redo",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "directionalityltr",
            "directionalityrtl",
            "|",
            "indent",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "emotion",
            //百度地图
            "map",
            //代码语言
            "insertcode",
            "background",
            "|",
            // 分割线
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "|",
          ],
        ],
      },
      rules: {
        communityname: [
          { required: true, message: "请填写小区名称", trigger: "blur" },
        ],
        unitname: [
          { required: true, message: "单元名称不能为空", trigger: "blur" },
        ],
        unitnum: [{ required: true, message: "栋数不能为空", trigger: "blur" }],
        unitstatus: [
          { required: true, message: "请选择状态", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.flag2 = this.$route.query.flag;
    console.log(this.flag2);

    this.getunlist();
  },
  methods: {
    // 监听富文本编辑框事件
    onEditorReady(editor) {
      console.log("编辑器已准备好", editor);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addList();
        } else {
          return false;
        }
      });
    },
    submitForm2() {
      this.flag2 = 1;
      this.ruleForm = this.grunlist[0];
      console.log(this.flag2);
      this.bth = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.unitcontext = "";
      // 返回上跳转来的页面
      this.$router.go(-1);
    },
    resetForm2() {
      this.$router.go(-1);
    },
    // 接口
    //保存
    async addList() {
      this.flag = false;
      this.yes = true;
      await this.$axios
        .post("/house/addunitList", {
          ...this.ruleForm,
        })
        .then((res) => {
          console.log(res);
          this.flag = true;
          this.yes = false;
          this.$message({
            message: "添加成功",
            type: "success",
          })
          this.$router.go(-1);
        });
    },
    // id 详情接口
    async getunlist() {
      await this.$axios
        .get("/house/getDetailId", {
          params: {
            id: this.$route.query.id,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          this.grunlist = res.data;
          console.log(this.grunlist);
        });
    },
    // 修改
    async submitForm3() {
      this.yes = true;
      await this.$axios
        .post("/house/updateunitList", {
          ...this.ruleForm,
          u_id: this.$route.query.id,
        })
        .then((res) => {
          this.yes = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$router.go(-1)
        
        });
    },
  },
};
</script>

<style scoped>
.main {
  /* padding-top:60px ; */
}
.buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  right: 2%;
  top: 20%;
}
.el-icon-folder-checked {
  font-size: 16px;
}
.table {
  display: flex;
  flex-direction: column;
}
.table > div {
  margin: 15px;
  text-align: right;
  width: 200px;
  display: flex;
  justify-content: flex-end;
}
.table > div > span {
  width: 50%;
  text-align: left;
}
sup {
  color: red;
}
</style>
